<template>
  <div
    
    :key="node.key"
    :gutter="node.options.gutter ? node.options.gutter : 0"
    :justify="node.options.justify"
    :align="node.options.align"
    @click.stop="handleSelectWidget()"
  >
    <draggable
      :list="node.columns"
      group="people"
      :component-data="{ name: 'flip-list', type: 'transition' }"
      class="el-row widget-col widget-view"
      :key="node.key"
      :item-key="node.key"
      @add="handleWidgetColAdd($event, node)"
    >
      <template #item="{ element, index }">
        <el-col :key="index" :span="element.span ? element.span : 0">

          {{index}}: {{element}}
          <widget-form-item v-for="(col, colIndex) in element.list"
            :element="col"
            :data="col"
            :key="col.id"
            v-model:select="selectWidget"
            :index="colIndex"
          ></widget-form-item>
        </el-col>
      </template>

       <template #footer>
          <div class="widget-view-action widget-col-action"
         v-if="selectWidget.key == node.key">

      <i class="iconfont icon-trash"></i>
    </div>

    <div class="widget-view-drag widget-col-drag"
         v-if="selectWidget.key == node.key">
      <i class="iconfont icon-drag drag-widget"></i>
    </div>
 
        </template>


    </draggable>

  </div>
   
</template>
<script>
import draggable from "vuedraggable";
import WidgetFormItem from "./WidgetFormItem";
export default {
  props: {
    node: {
      required: true,
      type: Object,
    },
    select: {
      type: Object,
    },
  },
  data() {
    return {
      selectWidget: this.select,
    };
  },
  watch: {
    select(val) {
      this.selectWidget = val;
    },
    selectWidget: {
      handler(val) {
        console.log("select formrow watch ..." + val);
        this.$emit("update:select", val);
      },
      deep: true,
    },
  },
  components: {
    draggable,
    WidgetFormItem,
  },
  name: "form-row-draggable",

  methods: {
    handleSelectWidget: function () {
      this.selectWidget = this.node;

      console.log("selected :" + this.selectWidget);
    },

    handleWidgetColAdd: function ($event, row, colIndex) {
      console.log("coladd", $event);
      console.log("this row:", row);
      console.log("this index", colIndex);
      // const newIndex = $event.newIndex
      // const oldIndex = $event.oldIndex
      const item = $event.item;

      console.log("from", item);

      const key =
        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);

      //vue3 已经大量的改善了这个给值
      row.columns[$event.newIndex].key = key;
      row.columns[$event.newIndex].id = key;

      // this.$set(row.columns[colIndex].list, newIndex, {
      //   ...row.columns[colIndex].list[newIndex],
      //   options: {
      //     ...row.columns[colIndex].list[newIndex].options,
      //     remoteFunc: 'func_' + key
      //   },
      //   key,
      //   // 绑定键值
      //   model: row.columns[colIndex].list[newIndex].type + '_' + key,
      //   rules: []
      // })
    },
  },
};
</script>
<style scoped>
.dragArea {
  min-height: 50px;
  outline: 1px dashed;
}
</style>